<!-- 修改 理化检测任务单详情(委托型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog v-dialogDrag :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'" append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose"
      :show="show" width="800px">
      <div slot="title">
        <span style="color:white;">数据上传（委托型）</span>
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;" @click="isFullScreen = !isFullScreen">
                <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
              </button>
      </div>
      <div class="uploadTitle">
        <img src="../../../../../assets/images/sagw.png" style="float:left;">
        <h2 style="text-align:center;">理化检测报告</h2>
        <span style="float: right;">报告文件编号：</span>
      </div>
      <el-form :model="form" :inline="true" label-width="130px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件号：">
              <el-input v-model="form.partNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="热处理炉号：">
              <el-input v-model="form.heatingNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型：">
              <el-input v-model="form.taskType" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件名称：">
              <el-input v-model="form.partName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批次零件总数量：">
              <el-input v-model="form.totalPartNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托方：">
              <el-input v-model="form.applyUser" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件图号：">
              <el-input v-model="form.partGraphNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料牌号：">
              <el-input v-model="form.materialNo" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="委托日期：">
              <el-date-picker v-model="form.applyTime" type="date" disabled style="width: 200px;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图纸版本：">
              <el-input disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="材料炉号：">
              <el-input v-model="form.materialFurnanceNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托单号：">
              <el-input></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需求完成日期：">
              <el-input v-model="form.expectCompleteTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="样品信息：">
              <el-radio-group v-model="form.sampleStatus" disabled>
                <el-radio label="实物">实物
                  <el-input v-if="form.sampleStatus == '实物'" v-model="form.quantity" disabled style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
                <el-radio label="试样">试样
                  <el-input v-if="form.sampleStatus == '试样'" v-model="form.quantity" disabled style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="form.remark" disabled style="width: 580px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务目的与要求：">
              <el-radio-group v-model="form.taskTarget">
                <el-radio label="新产品试制">新产品试制</el-radio>
                <el-radio label="常规均匀性实验">常规均匀性实验</el-radio>
                <el-radio label="失效零件分析">失效零件分析</el-radio><br>
                <el-radio label="复检">复检</el-radio>
                <el-radio label="设备新增/大修验收">设备新增/大修验收</el-radio>
                <el-radio label="其他">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="样品1" name="first">
            <el-table :data="tableData">
              <el-table-column prop="date" label="编号" align="center" width="60"></el-table-column>
              <el-table-column prop="date" label="检测项目" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测位置" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测要求" align="center" width="150"></el-table-column>
              <el-table-column label="实测数据">
                <el-table-column prop="date" label="1" align="center" width="50"></el-table-column>
                <el-table-column prop="date" label="2" align="center" width="50"></el-table-column>
              </el-table-column>
              <el-table-column prop="date" label="检测设备" align="center" width="150"></el-table-column>
              <el-table-column prop="date" label="备注" align="center" width="72"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="样品2" name="second">
            <el-table :data="tableData">
              <el-table-column prop="date" label="编号" align="center" width="60"></el-table-column>
              <el-table-column prop="date" label="检测项目" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测位置" align="center" width="100"></el-table-column>
              <el-table-column prop="date" label="检测要求" align="center" width="150"></el-table-column>
              <el-table-column label="实测数据">
                <el-table-column prop="date" label="1" align="center" width="50"></el-table-column>
                <el-table-column prop="date" label="2" align="center" width="50"></el-table-column>
              </el-table-column>
              <el-table-column prop="date" label="检测设备" align="center" width="150"></el-table-column>
              <el-table-column prop="date" label="备注" align="center" width="72"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-row style="margin-top: 10px;">
          <el-col :span="16">
            <el-form-item label="上传附件：">
              <el-upload class="upload-demo" ref="upload" action="/task/uploadAttach" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :data="uploadData" :on-success="uploadSuccess" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <uploading-attachments-button></uploading-attachments-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="verify">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import UploadingAttachments from 'dialog/experimental-management/uploading-attachments-button';
  import {
    getApplyInfoByIdService
  } from 'service/task';
  export default {
    components: {
      'uploading-attachments-button': UploadingAttachments
    },
    data() {
      return {
        isFullScreen: false,
        dialogVisible: this.show,
        activeName: 'first',
        form: {
          partNumber: '',
          heatingNumber: '',
          taskType: '',
          partName: '',
          totalPartNo: '',
          applyUser: '',
          partGraphNumber: '',
          materialNo: '',
          applyTime: '',
          materialFurnanceNumber: '',
          expectCompleteTime: '',
          sampleStatus: '',
          quantity: '',
          remark: ''
        },
        tableData: [],
        recordData: [],
        fileList: [],
        uploadData: {
          taskId: this.detailId
        }
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      detailId: {
        type: String
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
        if (this.dialogVisible) {
          getApplyInfoByIdService(this.detailId)
            .then(res => {
              // let taskTarget = res.data.result.taskTarget.split(",");
              // this.form.taskNo = ;
              if (!res.data.result.applyUser) {
                res.data.result.applyUser = {
                  org: {}
                };
              }

              this.form.applyTime = res.data.result.applyTime;
              this.form.taskType = res.data.result.taskType;
              this.form.applyOrgName = res.data.result.applyUser.org.name;
              this.form.applyUser = res.data.result.applyUser.name;
              this.form.expectCompleteTime = res.data.result.expectCompleteTime;
              this.form.projectNo = res.data.result.projectNo;
              this.form.partNumber = res.data.result.partNumber;
              this.form.partGraphNumber = res.data.result.partGraphNumber;
              this.form.partName = res.data.result.partName;
              this.form.materialNo = res.data.result.materialNo;
              this.form.totalPartNo = res.data.result.totalPartNo;
              this.form.sampleStatusPhase = res.data.result.sampleStatusPhase;
              this.form.materialFurnanceNumber = res.data.result.materialFurnanceNumber;
              this.form.heatingNumber = res.data.result.heatingNumber;
              this.form.sampleStatus = res.data.result.sampleStatus;
              this.form.quantity = res.data.result.quantity;
              this.form.batchNumber = res.data.result.batchNumber;
              this.form.provider = res.data.result.provider;
              this.form.remark = res.data.result.remark;
              this.form.taskTarget = res.data.result.taskTarget;
            });
        }
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.isFullScreen = false;
        this.dialogVisible = false;
      },
      handleClick(tab, event) {},
      // 确定
      verify() {
        this.$alert('操作已成功！', '提示', {
          confirmButtonText: '确定',
          type: 'success'
        });
        this.dialogVisible = false;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadSuccess(res, file, fileList) {
        // console.log(res, file, fileList)
        this.$alert("上传成功", "提示", {
          type: 'success'
        });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

<style scoped>
  .uploadTitle {
    overflow: hidden;
    border-bottom: 1px solid #e2dede;
    margin-bottom: 10px;
  }
</style>
